// 左侧素材tab切换底下的形状页面内容
import React, { useEffect, useState } from 'react';
import './shape.css';


const Shape: React.FC = () => {
  // 使用状态钩子定义 shapes（所有形状）和 filteredShapes（过滤后的形状）
  const [shapes, setShapes] = useState<any[]>([]);
  const [filteredShapes, setFilteredShapes] = useState<any[]>([]);

  // 使用副作用钩子在组件挂载时获取形状数据
  useEffect(() => {
    const fetchShapes = async () => {
      // 从 API 获取形状数据
      const response = await fetch('http://localhost:3000/api/shapes');
      const data = await response.json();
      setShapes(data.data); // 存储所有形状到 shapes 状态
      setFilteredShapes(data.data); // 默认显示所有形状
    };
    fetchShapes(); // 调用获取形状数据的函数
  }, []); // 空依赖数组确保只在组件挂载时执行

  // 过滤形状的函数，根据类型进行筛选
  const filterShapes = (type: string) => {
    if (type === '全部') {
      // 如果选择 "全部"，显示所有形状
      setFilteredShapes(shapes);
    } else {
      // 否则，过滤出匹配类型的形状
      setFilteredShapes(shapes.filter(shape => shape.type === type));
    }
  };

  return (
    <div>
      {/* 按钮组，用于选择不同类型的形状 */}
      <div>
        {['全部', '边框', '条纹', 'icon', '涂鸦框'].map(type => (
          <button key={type} onClick={() => filterShapes(type)}>
            {type} {/* 显示按钮文本为类型名称 */}
          </button>
        ))}
      </div>

      {/* 显示过滤后的形状 */}
      <div className="image-container">
        {filteredShapes.map(shape => (
          <div key={shape.id} className="shape-item">
            <img src={shape.image} alt={shape.title} /> {/* 显示形状图片 */}
            <p>{shape.title}</p> {/* 显示形状名称 */}
          </div>
        ))}
      </div>
    </div>
  );
};


export default Shape;
